<!DOCTYPE html>
<html lang="en" xmlns:border-collapse="http://www.w3.org/1999/xhtml">
  <head>
      <meta charset="UTF-8">
      <title>axios实例</title>
  </head>
  <body>
    <div id="app">
      <h1>{{msg}}</h1>
      <table border="1px" width="200px">
        <tr>
          <td>名字</td>
          <td>年龄</td>
        </tr>
        <tr v-for="monster in monsterList">
          <td>{{monster.name}}</td>
          <td>{{monster.age}}</td>
        </tr>
      </table>
    </div>

  <script src="vue.js"></script>
  <script src="axios.min.js"></script>
  <script type="text/javascript">
    let vm = new Vue({
      el:"#app",
      data:{
        msg: "妖怪列表",
        //表示妖怪信息数组
        monsterList:[]
      },
      methods:{
        //定义方法
        list() {
          //发出ajax请求获取数据 axios
          /*
              1.axios.get 表示发出ajax请求
              2.http://localhost:63342/axios/data/response.data.json 表示请求的url
              3.axios发出ajax基本语法 axios.get(url).then(箭头函数).then(箭头函数)...catch(异常箭头函数)
                I)如果get请求成功就进入第一个then()
                II)可以在第一个then()中继续发出 axios的ajax请求
                III)如果有异常，会进入catch(异常箭头函数)中、
              4.list在生命周期created()中调用
           */
          axios.get("http://localhost:63342/axios/data/response.data.json")
                  .then((result) => {
                    // console.log("result=", result)
                    // console.log("result.data=", result.data)
                    // console.log("result.data.data=", result.data.data)
                    // console.log("result.data.data.items=", result.data.data.items)
                    //将妖怪列表数组信息，绑定到data数据池的monsterList
                    this.monsterList = result.data.data.items;
                    //可以再次发出ajax请求
                  }).catch((error) => {
                    console.log("error=", error)
          })
        }
      },
      created() {
        this.list();
      }
    })
  </script>
  </body>
</html>